<template>
    <section>
        <el-tabs v-model="activeTab" class="product-edit-tabs" type="border-card" @tab-click="tabsChange">
            <el-tab-pane name="edit">
                <span slot="label"><i class="el-icon-edit"></i> 详情</span>
            </el-tab-pane>
            <el-tab-pane name="images">
                <span slot="label"><i class="el-icon-picture"></i> 图片</span>
            </el-tab-pane>
            <el-tab-pane name="product_properties">
                <span slot="label"><i class="fa fa-list"></i> 属性</span>
            </el-tab-pane>
            <el-tab-pane name="product_items">
                <span slot="label"><i class="fa fa-cubes"></i> 库存项</span>
            </el-tab-pane>
        </el-tabs>

        <el-card class="product-edit-content">
            <router-view></router-view>
        </el-card>
    </section>
</template>
<style>
    .el-tabs__item {
        width: 100px;
        text-align: center;
    }
    
    .product-edit-tabs .el-tabs__content {
        padding: 0;
    }
    
    .product-edit-content {
        border: none;
        border-radius: 0;
    }
</style>
<script>

    let tabNameArray = ['edit', 'images', 'product_properties', 'product_items']

    export default {
        created() {
            this.product_id = this.$route.params.id
        },
        data() {
            return {
                activeTab: "edit",
                product_id: null
            };
        },
        beforeRouteUpdate (to, from, next) {
            let pathArray = to.path.split('/')
            let lastPath = pathArray[3]
            if (tabNameArray.indexOf(lastPath) >= 0) {
                this.activeTab = lastPath
            }
            next()
        },
        watch: {
            '$route' (to, from) {
                // if (to.)
            }
        },
        methods: {
            tabsChange(tab) {
                switch (tab.name) {
                    case 'edit':
                        this.$router.push(`/products/${this.product_id}/edit`)
                        this.loadEditForm();
                        break;
                    case 'images':
                        this.$router.push(`/products/${this.product_id}/images`)
                        this.loadPicData();
                        break;
                    case 'product_properties':
                        this.$router.push(`/products/${this.product_id}/product_properties`)
                        this.loadPropertyData();
                        break;
                    case 'product_items':
                        this.$router.push(`/products/${this.product_id}/product_items`)
                        this.loadProductItemData();
                        break;
                    default:
                        console.log('error');
                }
            },
            loadEditForm() {
                // alert('loadRuleForm');
            },
            loadPicData() {
                // alert('loadPicData');
            },
            loadPropertyData() {
                // alert('loadPropertyData');
            },
            loadProductItemData() {
                // alert('ProductItemData');
            },
        }
    }

</script>